<template>
    <div class="map-container" >
        <div id="b" style="margin-left:160px">
            <el-col :offset="5" :span="18">
                <el-row>
                    <el-col :offset="12" :span="12">
                        <a class="header_a">适老化及无障碍</a>
                        <a class="header_a">请登录</a>
                        <span class="header_a">或</span>
                        <a class="header_a">免费注册</a>
                        <a class="header_a">消息</a>
                        <a class="header_a">查看订单</a>
                        <a class="header_a">积分商城</a>
                        <a class="header_a">联系客服</a>
                    </el-col>
                </el-row>
            </el-col>
            <el-col>
                <el-row>
                    <el-col :span="19">
                        <img class="header_img" style="width: 136px;height: 54px" src="https://s.qunarzz.com/f_cms/2021/1638865973476_447461838.png"/>
                        <a class="header_a2">首页</a>
                        <a class="header_a2">机票</a>
                        <a class="header_a2">酒店</a>
                        <a class="header_a2">团购</a>
                        <a class="header_a2">度假</a>
                        <a class="header_a2">邮轮</a>
                        <a class="header_a2">门票</a>
                        <a class="header_a2">火车票</a>
                        <a class="header_a2">攻略</a>
                        <a class="header_a2">当地人</a>
                        <a class="header_a2">汽车票</a>
                    </el-col>
                </el-row>
            </el-col>
        </div>
        <div class="sosuo" style="margin-left:160px">
        <el-form :inline="true" :model="cart" class="demo-form-inline">
          <el-form-item label="起始站:">
            <el-input v-model="cart.carSname" placeholder="起始站"></el-input>
          </el-form-item>
          <el-form-item label="终点站:">
            <el-input v-model="cart.carEname" placeholder="终点站"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit()">汽车票搜索</el-button>
          </el-form-item>
          <el-form-item>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div>
        <el-table
          :data="cartslist"
          style="width: 100%">
          <el-table-column
            prop="carSname"
            label="起始地点"
            width="180">
          </el-table-column>
          <el-table-column
            prop="carEname"
            label="终点地点"
            width="180">
          </el-table-column>
          <el-table-column
            prop="carStime"
            label="起始日期">
          </el-table-column>
          <el-table-column
            prop="carEtime"
            label="终点日期">
          </el-table-column>
          <el-table-column
            prop="carPrice"
            label="汽车票价">
          </el-table-column>
          <el-table-column
            prop="carNumber"
            label="车牌号">
          </el-table-column>
          <el-table-column
            prop="carSeat"
            label="座位">
          </el-table-column>
          <el-table-column
            prop="carType"
            label="汽车名称">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="text" size="small">买汽车票</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageable.current"
          :page-sizes="pageable.pagesizes"
          :page-size="pageable.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageable.total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
    export default {
        name: "cartshow",
      data(){
          return{
            cart:{
              carSname:'',
              carEname:''
            },
            cartslist:[
              {
                  carId: '',
                  carSname: '',
                  carEname: '',
                  carStime: '',
                  carEtime: '',
                  carPrice: '',
                  carNumber: '',
                  carSeat: '',
                  carType: ''
              }
            ],
            pageable:{
              current:1 ,//当前页
              pagesize:5 ,//每页行数
              pagesizes:[5,10,15,20], //可选择的每页的行数
              total:400 //总条数
            }
          }
      },
      methods:{
        onSubmit(){
          this.$axios.get('/cart/getCartByName?carSname='+this.cart.carSname+'&carEname='+this.cart.carEname
          ).then(res=>{
            this.cartslist = res.data.data
          })
        },
        findAllCart(){
          //axios请求
          this.$axios.get('/cart/findAllCart',{
            params:{
              current:this.pageable.current,
              size:this.pageable.pagesize
            }
          }).then(res=>{
            this.cartslist=res.data.data.records;
            this.pageable.total=res.data.data.total;
          })
        },
        handleEdit(row) {
            console.log(row.carId)
          this.$router.push({path:'/cartOrder',query:{carId:row.carId}})
        },
        resetForm(formName) {
          this.findAllCart();
        },
        handleSizeChange(val) {//更改每页行数
          // console.log(`每页 ${val} 条`);
          this.pageable.pagesize=val;
          this.findAllCart();
        },
        handleCurrentChange(val) {//更改页码
          // console.log(`当前页: ${val}`);
          this.pageable.current=val;
          this.findAllCart();
        }
      },
      mounted() {
          var carSname = this.$route.query.carSname;
          var carEname = this.$route.query.carEname;
          if (carSname!=null||carEname!=null){
              this.$axios.get('/cart/getCartByName?carSname='+carSname+'&carEname='+carEname
              ).then(res=>{
                  this.cartslist = res.data.data
              })
          }else {
              this.findAllCart();
          }
      }
    }
</script>

<style scoped>
.map-container{
    background-image: url('../assets/3.jpg');
    background-size: cover;
    background-position: center center;
//opacity: 0.9;
    width: 100%;
    height: 700px;
}
#b{
    width: 1200px;
    height:90px;

}
.header_a{
    font-size: 12px;
    margin-top: 0px;
    margin-left: 5px;
}
.header_img{
    float: left;
    margin-bottom: 0px;
}
.header_a2{
    font-size: 15px;
    font-family: "Hiragino Sans GB";
    float: left;
    margin-right: 12px;
    margin-top: 30px;
}
</style>
